<template>
  <div class="lang-detail-wrap">
    <div class="single-searchBox">
      <span
        style="display: inline-block; margin-right: 12px; font-weight: bold"
        >{{ langModule.name }}</span
      >
      <a-input
        size="medium"
        maxlength="50"
        class="single-searchBox-item"
        clearable
        :style="{ width: '200px' }"
        :placeholder="lang.NAME_OR_CODE"
      ></a-input>
      <a-button type="primary" size="medium" style="margin-left: 8px">
        {{ lang.LANG_CHOOSE }}
      </a-button>
      <a-button
        size="medium"
        type="primary"
        icon="a-icon-plus"
        style="margin-left: 8px"
        @click="addCode"
      >
        {{ lang.ADD_MODULE }}
      </a-button>
    </div>
    <div class="table-wrap">
      <a-table
        :data="langDetails"
        stripe
        :scroll="{ x: '100%', y: '100%' }"
        :pagination="PageConfigs"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #columns>
          <a-table-column title="#">
            <template #cell="{ rowIndex }">
              {{
                (PageConfigs.pageSize || 0) * ((PageConfigs.current || 1) - 1) +
                (rowIndex + 1)
              }}
            </template>
          </a-table-column>
          <a-table-column
            :title="lang.PLACEHOLDER_TRE"
            data-index="code"
          ></a-table-column>
          <a-table-column
            :title="lang.PLACEHOLDER_TWO"
            data-index="content"
          ></a-table-column>
          <a-table-column :title="lang.PLACEHOLDER_TWO">
            <template #cell="{ record }">
              <a-button type="outline" size="small" @click="editRow(record)"
                >编辑</a-button
              >
              <a-button
                type="outline"
                status="danger"
                style="margin-left: 4px"
                size="small"
                @click="deleteRow(record)"
                >删除</a-button
              >
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <LangModuleDetailDialog
      v-model:visible="langDetailDialogVisible"
      :lang="lang"
      :current-lang-detail="currentLangDetail"
      @add="getModuleLangList"
      @edit="getModuleLangList"
    ></LangModuleDetailDialog>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, reactive, ref, watch } from 'vue';
  import { PaginationProps } from '@arco-design/web-vue/es/pagination/interface';
  import { getLangDetails } from '../api';
  import LangModuleDetailDialog from '../lang-module-detail-dialog/index.vue';
  import { LangModuleDetail } from '../lang-module-detail-dialog/lang-module-detail';

  const Props = defineProps({
    langModule: {
      type: Object,
      default: () => ({}),
    },
    lang: {
      type: Object,
      default: () => ({}),
    },
  });
  const langDetails = ref([]);

  const PageConfigs: boolean | PaginationProps = reactive({
    pageSize: 10,
    current: 1,
    total: 0,
  });

  let currentModule: any = '';
  const currentLangDetail = ref<LangModuleDetail>();
  const langDetailDialogVisible = ref(false);
  const opType = ref(0);
  const getModuleLangList = () => {
    const params = {
      id: currentModule.id,
      page: PageConfigs.current,
      size: PageConfigs.pageSize,
      langCode: localStorage.getItem('lang_env') || 'zh-CN',
      sort: '',
      sortValue: '',
    };
    getLangDetails(params).then((res) => {
      langDetails.value = res.data.list || [];
      PageConfigs.total = res.data.total || 10;
    });
  };

  const addCode = () => {
    opType.value = 0;
    langDetailDialogVisible.value = true;
  };

  const editRow = (row: LangModuleDetail): void => {
    currentLangDetail.value = row;
    opType.value = 1;
    langDetailDialogVisible.value = true;
  };
  const deleteRow = (row: any): void => {
    // eslint-disable-next-line no-console
    console.log(row);
  };
  const pageSizeChange = (size: number) => {
    PageConfigs.pageSize = size;
    getModuleLangList();
  };
  const pageChange = (page: number) => {
    PageConfigs.current = page;
    getModuleLangList();
  };

  watch(
    () => Props.langModule,
    (newValue) => {
      currentModule = newValue;
      getModuleLangList();
    }
  );
</script>

<style scoped lang="less">
  .lang-detail-wrap {
    //border: 1px solid blue;
    height: 100%;

    .single-searchBox {
      padding: 10px;
    }

    .table-wrap {
      padding: 10px;
      height: calc(100% - 40px);
    }
  }
</style>
